<template>
  <div class="carouse">
    <el-carousel indicator-position="none">
      <el-carousel-item
          class="lunbo-box-item"
          v-for="(item) in carouse"
          :key="item"
      >
        <img :src="item.src" class="lunbotu" alt="轮播图">
      </el-carousel-item>
    </el-carousel>
  </div>
  <div class="main">
    <div class="bun-on"><span class="title">公益项目</span><span class="btn"><el-button round :size="20" @click="publish()">我要发布</el-button></span></div>

    <div class="topbox">
      <div v-for="item in news" :key="item.nid" class="main-el" @click="toDetail(item.nid)">
        <el-card :body-style="{ padding: '0px' }">
          <img
              :src="item.nimg"
              class="image listimg"/>

          <div style="padding: 14px">
            <span class="ntitle">{{ item.ntitle }}</span>
            <div class="bottom">
              <span class="nsubhead">{{ item.nsubhead }}</span>
            </div>
          </div>
        </el-card>

      </div>
    </div>
  </div>

</template>

<script>
import doThis from "@/api/getData";
import {getCurrentInstance} from "vue";
import {ElMessage} from "element-plus";


export default {
  name: "FrontList",
  data() {
    return {
      carouse: [
        {src: require('@/assets/img/轮播1.png')},
        {src: require('@/assets/img/轮播2.jpg')},
        {src: require('@/assets/img/轮播5_看图王.jpg')},
      ],
      news: [],

    }
  },
  mounted() {
    console.log(getCurrentInstance())
    doThis.doGet("/news/findnews", null).then(res => {
      console.log(res)
      this.news = res.data
    })
  },
  methods: {
    toDetail(id) {
      this.$router.push("/front/newsDetail/" + id)
    },
    publish() {
      this.$checkLogin()
      let user = JSON.parse(localStorage.getItem("user"))
      if (user !== null && user.urole !== 1) {
        this.$router.push("/front/addNews/")
      } else {
        ElMessage.error('您不能发布新闻')
      }

    }
  }
}
</script>

<style scoped>

.carouse {
  margin: 0 auto;
  width: 1150px;
}

.carouse img {
  width: 1200px;
}

.main {
  margin: 30px auto;
  width: 1180px;
}

.main-el {
  width: 300px;

  padding-left: 100px;
  margin-top: 30px;


}
.bun-on{
  display: flex;
  flex-wrap: wrap;
}

.topbox {
  width: 1200px;
  display: flex;
  flex-wrap: wrap;
  margin-left: -65px;
}

.title {

  font-size: 20px;
  margin-left: 35px;
}
.btn{
  font-size: 20px;
  margin-left: 1050px;
  margin-top: -35px;

}

.ntitle {
  font-size: 18px;
  margin: 5px;
  padding: 10px;
}

.nsubhead {
  font-size: 14px;
  color: rgba(116, 114, 114, 0.68);
  margin: 5px;
  padding: 10px;
}

.bottom{
  height: 20px;
  width: 200px;
  display: -webkit-box;
  -webkit-line-clamp:1;
  overflow: hidden;
  -webkit-box-orient: vertical;

}
.listimg{
  width: 300px;
  height: 235px;
}

</style>